import React, { useState } from "react";
import { NavBar, Button, Modal } from "antd-mobile";
import { data, useNavigate } from "react-router-dom";
import "./index.css";
import { AlipaySquareFill } from "antd-mobile-icons";
import { Wechat } from "@react-vant/icons";
import request from "../../api/request";
function Index() {
  // 定义单位
  const navigate = useNavigate();
  const price = Number(Math.random().toString().slice(6, 9));
  const id = Number(Math.random().toString().slice(2, 4));
  const title = "车票";

  const [visible, setVisible] = useState(false);
  // 开启弹框
  const add = () => {
    setVisible(true);
  };
  // 调用和接口
  const zhifu = async () => {
    alert("请再次确认订单");
    const res = await request.get("/api/pay", {
      params: {
        id: id,
        price: price,
        title: title,
      },
    });
    console.log(res);
    // 接口支付成功回调
    // 跳转支付宝支付
    if (res.data.code === 200) {
      window.location.href = res.data.data;
    }
    // 接口支付完成回调
    const resp = await request.get("/api//query", {
      id: id,
    });
    if (resp.data.code === 200) {
      window.location.href = "/success";
    }
  };
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>订单详情</NavBar>
      <p>排队成功</p>
      <div>
        <div className="box1">
          <div className="left1">
            <div className="fu1"></div>
            <div>
              <p>20:03</p>
              <p>D3212</p>
              <p>21:03</p>
            </div>
            <div>
              <p>北京西</p>
              <p>1h 12m</p>
              <p>三亚</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p>吴守念</p>
        <p>身份证：410928200604102154</p>
        <p>二等座</p>
        <p>排队成功</p>
      </div>

      <Button block color="primary" size="large" onClick={() => add()}>
        支付订单
      </Button>
      <Modal
        visible={visible}
        content={
          <div className="box">
            <p>
              <AlipaySquareFill onClick={zhifu} />
            </p>
            <p>
              <Wechat />
            </p>
          </div>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
        actions={[
          {
            key: "confirm",
            text: "我知道了",
          },
        ]}
      />
    </div>
  );
}

export default Index;
